<template>
  <div>
    <van-cell-group>
      <van-cell title="终端服务" style="background: #f2f2f2;padding: 0 16px 8px">
      </van-cell>
    </van-cell-group>
    <van-row class="order_status">
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/address'})">
          <van-icon name="dizhi1"/>
        </div>
        <div>地址管理</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="fuwu">
          <van-icon name="fuwu"/>
        </div>
        <div>服务中心</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/regstore'})">
          <van-icon name="team"/>
        </div>
        <div>门店入驻</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="searchStore">
          <van-icon name="chaxun1"/>
        </div>
        <div>入驻查询</div>
      </van-col>
    </van-row>
    <van-popup v-model="phoneShow" position="bottom" style="z-index:2004">
      <div style="text-align: center;padding: 10px 0;border-bottom: 1px solid #ccc;">
        请输入手机号
      </div>
      <van-field class="border-bottom" v-model="phone" placeholder="输入手机号" />
      <div style="text-align: center; padding: 10px 0 60px;">
        <van-button @click="searchHandle" style="margin-right: 20px;" type="primary">查询</van-button>
        <van-button @click="phoneShow = false" type="danger">取消</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { shopDetail, storeIndex } from '@/api/api';
import { getLocalStorage } from '@/utils/local-storage';
import { Row, Col, Dialog, Popup, Field } from 'vant';
import { userIndex } from '@/api/api';

export default {
  name: 'user-module',

  data() {
    return {
      phone: '',
      phoneShow: false,
      show: false
    };
  },
  methods: {
    fuwu() {
      const infoData = getLocalStorage(
        'storeName'
      );
      console.log(infoData)
      storeIndex().then(res => {
        console.log(res, 'res')
        Dialog.alert({
          title: infoData.storeName,
          message: '<div class="storecss">联系人：'+res.data.data.member+'<br>'+'联系方式：'+res.data.data.mobile+'<br>'+'联系地址：'+res.data.data.address+'<br></div>'
        });
      })
      
    },
    searchStore() {
      this.phoneShow = true
    },
    searchHandle() {
      this.phoneShow = false
      shopDetail({mobile: this.phone}).then(res => {
        console.log(res)
        Dialog.alert({
          title: res.data.errmsg,
          message: res.data.data.comment
        })
      })
    }
  },
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Dialog.name]: Dialog,
    [Row.name]: Row,
    [Col.name]: Col
  }
};
</script>


<style scoped lang="scss">
@import '../../assets/scss/mixin';
.storecss {
  text-align: left;
}
.order_status {
  background-color: #fff;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;

  > div {
    @include one-border;
    &::after {
      top: 50%;
      left: 50%;
      border-bottom: 0;
      border-right: 1px solid $border-color;
      height: 150%;
      transform: scale(0.5) translate3d(-50%, -50%, 0);
      transform-origin: 0 0;
    }
    &:last-child::after {
      border: 0;
    }
  }
 

  .order_status_icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 24px;
      color: #000;
    }
  }
}
</style>
